<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>生成二维码</title>
        <style>
            #qrcode {
                width: 160px;
                height: 160px;
                margin-top: 15px;
            }

            #text {
                height: 23px;
            }

            #button {
                height: 29px;
            }
        </style>
    </head>

    <body>
        <div style="width:360px;height:360px;">
            <h2 style="margin-left: 50px;">生成二维码</h2>
            <input id="text" type="text" value="https://www.baidu.com" />
            <button id="button">生成二维码</button><br />
            <div id="qrcode"></div>
        </div>
        <h2><a href="reqrcode.html">我要解析二维码</a></h2>
    </body>
</html>
<script src="js/jquery.min.js"></script>
<script src="js/qrcode.js"></script>
<script type="text/javascript">
    //调用插件，创建一个二维码解析对象
    var qrcode = new QRCode("qrcode");

    // 生成二维码的方法
    function makeCode() 
    {
        // 二维码地址 
        var Url = document.getElementById("text");

        if (!Url.value) {
            alert("请输入生成二维码的地址");
            Url.focus();
            return;
        }

        //调用二维码对象，根据我们的url地址生成二维码
        qrcode.makeCode(Url.value);
    }
    
    makeCode();

    // 点击生成二维码
    $("#button").on("click", function () {
        makeCode();
    })
</script>